<template>
  <div>
    <div class="head">
      反馈问题
      <div @click="problem">取消</div>
    </div>
    <div class="textarea">
      <textarea v-model="suggest" placeholder="描述你的问题"></textarea>
    </div>

    <div class="computed" :class="{red: suggest.length > 200}">{{suggest.length}}/200</div>
    <van-button class="btn" type="info" @click="submit">提交</van-button>
  </div>
</template>
<script>
import { wxShare } from "@/mixin/share";
export default {
  name: "userbang",
  data() {
    return {
      suggest: ""
    };
  },
  mixins: [wxShare],
  methods: {
    async submit() {
      if (!this.suggest || this.suggest.length > 200) {
        this.$toast.fail("请按要求填写问题");
        return;
      }
      let res = await this.$http.post(`api/my/save_suggest`, {
        content: this.suggest
      });
      if (res) {
        this.$toast.success("提交成功,谢谢你的反馈");
        this.$router.go(-1);
      }
    },
    problem() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
.head {
  width: 100%;
  text-align: center;
  font-size: 16px;
  height: 36px;
  line-height: 36px;
  position: relative;
  margin-top: 10px;
}
.head > div {
  position: absolute;
  line-height: 36px;
  font-size: 14px;
  top: 0;
  right: 20px;
  flex-wrap: bold;
}
.textarea {
  margin: 10px;
}
textarea {
  width: 100%;
  height: 180px;
  border: 1px solid #666;
  outline: none;
  font-size: 12px;
  box-sizing: border-box;
  padding: 10px;
  resize: none;
}
.computed {
  float: right;
  font-size: 12px;
  color: #333;
}
.red {
  color: red;
}
.btn {
  width: 90%;
  margin: 30px auto 0;
  display: block;
  border-radius: 4px;
}
</style>
